<template>
<div class="user">
    <!--内容-->
    <div class="product-content">
      <div class="table-wrap">
        <el-table
          size="small"
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column
            prop="messageTypeText"
            :label="$t('setting.belong_to')"
          ></el-table-column>
          <el-table-column
            prop="messageName"
            :label="$t('setting.notification_name')"
          ></el-table-column>
          <el-table-column prop="remark" :label="$t('setting.push_rule')"></el-table-column>
          <el-table-column :label="$t('setting.mp_tpl_msg')" v-if="message_to == 10">
            <template #default="scope">
              <el-checkbox
                v-model="scope.row.mtStatus"
                @change="(checked) => mtStatusChange(checked, scope.row)"
                >{{$t('setting.enabled')}}</el-checkbox
              >
              <el-link
                type="primary"
                :underline="false"
                style="padding-left: 10px"
                @click="mtClick(scope.row)"
                >{{$t('setting.settings')}}</el-link
              >
            </template>
          </el-table-column>
          <el-table-column :label="$t('setting.mp_subscribe_notice')" v-if="message_to == 10">
            <template #default="scope">
              <el-checkbox
                v-model="scope.row.mpStatus"
                @change="(checked) => mpStatusChange(checked, scope.row)"
                >{{$t('setting.enabled')}}</el-checkbox
              >
              <el-link
                type="primary"
                :underline="false"
                style="padding-left: 10px"
                @click="mpClick(scope.row)"
                >{{$t('setting.settings')}}</el-link
              >
            </template>
          </el-table-column>
          <el-table-column :label="$t('setting.miniapp_notice')" v-if="message_to == 10">
            <template #default="scope">
              <el-checkbox
                v-model="scope.row.wxStatus"
                @change="(checked) => wxStatusChange(checked, scope.row)"
                >{{$t('setting.enabled')}}</el-checkbox
              >
              <el-link
                type="primary"
                :underline="false"
                style="padding-left: 10px"
                @click="wxClick(scope.row)"
                >{{$t('setting.settings')}}</el-link
              >
            </template>
          </el-table-column>
          <el-table-column :label="$t('setting.sms_notice')">
            <template #default="scope">
              <el-checkbox
                v-model="scope.row.smsStatus"
                @change="(checked) => smsStatusChange(checked, scope.row)"
                >{{$t('setting.enabled')}}</el-checkbox
              >
              <el-link
                type="primary"
                :underline="false"
                style="padding-left: 10px"
                @click="smsClick(scope.row)"
                >{{$t('setting.settings')}}</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--公众号模板消息-->
    <Mt
      v-if="open_mt"
      :open_mt="open_mt"
      :messageModel="messageModel"
      @closeDialog="closeDialogFunc($event, 'mt')"
    ></Mt>
    <!--公众号-->
    <Mp
      v-if="open_mp"
      :open_mp="open_mp"
      :messageModel="messageModel"
      @closeDialog="closeDialogFunc($event, 'mp')"
    ></Mp>
    <!--小程序-->
    <Wx
      v-if="open_wx"
      :open_wx="open_wx"
      :messageModel="messageModel"
      @closeDialog="closeDialogFunc($event, 'wx')"
    ></Wx>
    <!--短信-->
    <Sms
      v-if="open_sms"
      :open_sms="open_sms"
      :messageModel="messageModel"
      @closeDialog="closeDialogFunc($event, 'sms')"
    ></Sms>
  </div>
</template>

<script>
import MessageApi from "@/api/message.js";
import Mp from "./settings/Mp.vue";
import Wx from "./settings/Wx.vue";
import Sms from "./settings/Sms.vue";
import Mt from "./settings/Mt.vue";
export default {
  components: {
    Mp,
    Wx,
    Sms,
    Mt
  },
  data() {
    return {
      /*是否加载完成*/
      loading: true,
      /*列表数据*/
      tableData: [],
      /*是否打开添加弹窗*/
      open_mt: false,
      open_mp: false,
      open_wx: false,
      open_sms: false,
      /*当前编辑的对象*/
      messageModel: {}
    };
  },
  props: ["message_to"],
  watch: {
    message_to: function (n, o) {
      if (n != o) {
        /*获取列表*/
        this.getData();
      }
    }
  },
  created() {
    /*获取列表*/
    this.getData();
  },
  methods: {
    /*获取列表*/
    getData() {
      let self = this;
      MessageApi.messageList({
        messageTo: self.message_to
      }, true).then(res => {
        self.loading = false;
        self.tableData = res.data;
        self.tableData.forEach(function (message) {
          message.mtStatus = message.mtStatus === 1 ? true : false;
          message.mpStatus = message.mpStatus === 1 ? true : false;
          message.wxStatus = message.wxStatus === 1 ? true : false;
          message.smsStatus = message.smsStatus === 1 ? true : false;
          if (message.messageSettingsId == null) {
            message.messageSettingsId = 0;
          }
        });
      }).catch(error => {});
    },
    /*公众号消息模板设置*/
    mtClick(item) {
      this.messageModel = item;
      this.open_mt = true;
    },
    /*公众号订阅设置*/
    mpClick(item) {
      this.messageModel = item;
      this.open_mp = true;
    },
    /*微信小程序消息模板设置*/
    wxClick(item) {
      this.messageModel = item;
      this.open_wx = true;
    },
    /*短信模板设置*/
    smsClick(item) {
      this.messageModel = item;
      this.open_sms = true;
    },
    /*关闭弹窗*/
    closeDialogFunc(e, f) {
      if (f == "mp") {
        this.open_mp = e.openDialog;
        if (e.type == "success") {
          this.getData();
        }
      }
      if (f == "wx") {
        this.open_wx = e.openDialog;
        if (e.type == "success") {
          this.getData();
        }
      }
      if (f == "sms") {
        this.open_sms = e.openDialog;
        if (e.type == "success") {
          this.getData();
        }
      }
      if (f == "mt") {
        this.open_mt = e.openDialog;
        if (e.type == "success") {
          this.getData();
        }
      }
    },
    mtStatusChange: function (checked, row) {
      let self = this;
      if (row.messageSettingsId == 0 || row["mtTemplate"] == null) {
        ElMessageBox.alert($t("setting.set_template_tip"), $t("setting.alert"), {
          confirmButtonText: $t("setting.confirm")
        });
        row.mtStatus = false;
        return;
      }
      self.loading = true;
      MessageApi.updateSettingsStatus({
        messageType: "mt",
        messageSettingsId: row.messageSettingsId
      }, true).then(data => {
        self.loading = false;
        row.mtStatus = checked;
      }).catch(error => {
        self.loading = false;
        row.mtStatus = !checked;
      });
    },
    mpStatusChange: function (checked, row) {
      let self = this;
      console.log(row);
      if (row.messageSettingsId == 0 || row["mpTemplate"] == null) {
        self.$alert($t("setting.set_template_tip"), $t("setting.alert"), {
          confirmButtonText: $t("setting.confirm")
        });
        row.mpStatus = false;
        return;
      }
      self.loading = true;
      MessageApi.updateSettingsStatus({
        messageType: "mp",
        messageSettingsId: row.messageSettingsId
      }, true).then(data => {
        self.loading = false;
        row.mpStatus = checked;
      }).catch(error => {
        self.loading = false;
        row.mpStatus = !checked;
      });
    },
    wxStatusChange: function (checked, row) {
      let self = this;
      if (row.messageSettingsId == 0 || row["wxTemplate"] == null) {
        self.$alert($t("setting.set_template_tip"), $t("setting.alert"), {
          confirmButtonText: $t("setting.confirm")
        });
        row.wxStatus = false;
        return;
      }
      self.loading = true;
      MessageApi.updateSettingsStatus({
        messageType: "wx",
        messageSettingsId: row.messageSettingsId
      }, true).then(data => {
        self.loading = false;
        row.wxStatus = checked;
      }).catch(error => {
        self.loading = false;
        row.wxStatus = !checked;
      });
    },
    smsStatusChange: function (checked, row) {
      let self = this;
      if (row.messageSettingsId == 0 || row["smsTemplate"] == null) {
        self.$alert($t("setting.set_template_tip"), $t("setting.alert"), {
          confirmButtonText: $t("setting.confirm")
        });
        row.smsStatus = false;
        return;
      }
      self.loading = true;
      MessageApi.updateSettingsStatus({
        messageType: "sms",
        messageSettingsId: row.messageSettingsId
      }, true).then(data => {
        self.loading = false;
        row.smsStatus = checked;
      }).catch(error => {
        self.loading = false;
        row.smsStatus = !checked;
      });
    }
  }
};
</script>

<style>
.operation-wrap {
  border-radius: 8px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 15px 15px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  background: #909399;
  background-size: 100% 100%;
  color: #fff;
  margin-bottom: 10px;
}
</style>

